<template>
  <div class="dashboard-panel-detail" @mouseup="drops" id="plan-child-id-2">
    <!-- <div class="dashboard-panel-detail-child">
      <div class="pages-box-pop" :class="{ 'pages-box-noscroll': noCsroll }">
        <div
          class="pages-left-child"
          :class="{ 'pages-left-child-level': props.level ? true : false, 'pages-left-close': !leftClose }"
        >
          <div class="pages-left-child-item" :class="{ 'pages-left-close': !leftClose }" v-show="leftClose">
            <div class="pages-left-child-item-child">
              <t-loading :loading="plantabLoading" size="large"> 
                <div class="pages-left-child-item-child-content"> 
                  <div
                    class="page-heard hw-flex-style-b-c outline"
                    :class="{ 'three-boxs-active-move': !store.modelIndex }"
                  >
                    <span class="title-heard-text">策展大纲 </span>

                    <div class="icon-boxs">
                      <t-tooltip content="导出大纲"> 
                        <div
                          v-loading="wordLoading"
                          @click="getWord()"
                          class="heard-icon hw-flex-style-c-c hw-click-cursor heard-icon-down"
                        >
                          <i class="doorIcon">&#xe656;</i>
                        </div>
                      </t-tooltip>

                      <t-popup content="新建一级大纲" attach="#plan-child-id-2" v-if="moduleLists.length < 15">
                        <div
                          style="margin-left: 12px"
                          @click="addModel()"
                          class="heard-icon hw-flex-style-c-c hw-click-cursor"
                        >
                          <i class="doorIcon">&#xe662;</i>
                        </div>
                      </t-popup>
                    </div>
                  </div>

                  <div class="pages-left-contents tree-content" v-show="leftClose">
                    <threeList
                      ref="threeRef"
                      :moduleLists="moduleLists"
                      v-if="moduleLists.length > 0"
                      @editItem="editItem"
                      @emitDel="emitDel"
                      @updateList="updateList"
                    />

                    <div class="ages-right-child-null-button contents-null-button" @click="addModel()" v-else>
                      <i class="doorIcon">&#xe662;</i>
                      <span>新建单元</span>
                    </div> 
                  </div>

                  <div class="page-heard-dr" :class="{ 'three-boxs-active-move': !store.modelIndex }"></div>

                  <div
                    class="page-heard page-heard-sloid hw-flex-style-b-c"
                    :class="{ 'three-boxs-active-move': !store.modelIndex }"
                  >
                    <span class="title-heard-text">更多板块</span>
                    <div
                      class="switch-box"
                      :class="{ 'switch-box-lock': !switchShow }"
                      @click="switchShow = !switchShow"
                    >
                      <i class="doorIcon">&#xe664;</i>
                    </div>
                  </div>

                  <div
                    class="pages-left-contents pages-left-contents-reative"
                    :class="{ 'three-boxs-active-move': !store.modelIndex, 'pages-left-contents-lock': !switchShow }"
                  >
                    <div class="card-item-parent" v-for="(item, index) in plateTab" :key="index">
                      <div
                        v-if="item.type !== 5"
                        class="card-item hw-flex-style-b-c hw-click-cursor"
                        :class="{ 'chang-item-active': item.type == cruuent }"
                        @click="clickGroup(item.type, item.title)"
                      > 
                        <div
                          class="card-item-left"
                          :style="{ color: item.type == cruuent ? '#e62b17' : 'rgba(0, 0, 0, 0.59)' }"
                        >
                          {{
                            item.type == 3
                              ? '学术研究'
                              : item.type == 4
                              ? '文创商品'
                              : item.type == 6
                              ? '策展团队'
                              : '版权声明'
                          }}
                        </div>
                        <t-tooltip content="开启后，能在模版中显示该板块内容">
                          <div @click.stop="chagestop">
                            <t-switch v-model="item.config" @change="change(item)" />
                          </div>
                        </t-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </t-loading>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="pages-box" :class="{ 'pages-box-noscroll': noCsroll }">
      <!-- <div
        class="pages-left-child"
        :class="{ 'pages-left-child-level': props.level ? true : false, 'pages-left-close': !leftClose }"
      ></div> -->
      <div
        class="pages-left-child"
        :class="{ 'pages-left-child-level': props.level ? true : false, 'pages-left-close': !leftClose }"
      >
        <div class="pages-left-child-item" :class="{ 'pages-left-close': !leftClose }" v-show="leftClose">
          <div class="pages-left-child-item-child">
            <t-loading :loading="plantabLoading" size="large">
              <div class="pages-left-child-item-child-content">
                <div
                  class="page-heard hw-flex-style-b-c outline"
                  :class="{ 'three-boxs-active-move': !store.modelIndex }"
                >
                  <span class="title-heard-text">策展大纲 </span>

                  <div class="icon-boxs">
                    <t-tooltip content="导出大纲">
                      <div
                        v-loading="wordLoading"
                        @click="getWord()"
                        class="heard-icon hw-flex-style-c-c hw-click-cursor heard-icon-down"
                      >
                        <i class="doorIcon">&#xe656;</i>
                      </div>
                    </t-tooltip>

                    <t-popup content="新建一级大纲" attach="#plan-child-id-2" v-if="moduleLists.length < 15">
                      <div
                        style="margin-left: 12px"
                        @click="addModel()"
                        class="heard-icon hw-flex-style-c-c hw-click-cursor"
                      >
                        <i class="doorIcon">&#xe662;</i>
                      </div>
                    </t-popup>
                  </div>
                </div>

                <div class="pages-left-contents tree-content" v-show="leftClose">
                  <threeList
                    ref="threeRef"
                    :moduleLists="moduleLists"
                    v-if="moduleLists.length > 0"
                    @editItem="editItem"
                    @emitDel="emitDel"
                    @updateList="updateList"
                  />

                  <div class="ages-right-child-null-button contents-null-button" @click="addModel()" v-else>
                    <i class="doorIcon">&#xe662;</i>
                    <span>新建单元</span>
                  </div>
                </div>

                <!-- <div class="page-heard-dr" :class="{ 'three-boxs-active-move': !store.modelIndex }"></div> -->

                <div
                  class="page-heard page-heard-sloid hw-flex-style-b-c"
                  :class="{ 'three-boxs-active-move': !store.modelIndex }"
                  @click="switchShow = !switchShow"
                >
                  <span class="title-heard-text">更多板块</span>
                  <div class="switch-box" :class="{ 'switch-box-lock': !switchShow }">
                    <i class="doorIcon">&#xe664;</i>
                  </div>
                </div>

                <div
                  class="pages-left-contents pages-left-contents-reative"
                  :class="{ 'three-boxs-active-move': !store.modelIndex, 'pages-left-contents-lock': !switchShow }"
                >
                  <div class="card-item-parent" v-for="(item, index) in plateTab" :key="index">
                    <div
                      v-if="item.type !== 5"
                      class="card-item hw-flex-style-b-c hw-click-cursor"
                      :class="{ 'chang-item-active': item.type == cruuent }"
                      @click="clickGroup(item.type, item.title)"
                    >
                      <div
                        class="card-item-left"
                        :style="{ color: item.type == cruuent ? '#e62b17' : 'rgba(0, 0, 0, 0.59)' }"
                      >
                        {{
                          item.type == 3
                            ? '学术研究'
                            : item.type == 4
                            ? '文创商品'
                            : item.type == 6
                            ? '策展团队'
                            : '版权声明'
                        }}
                      </div>
                      <t-tooltip content="开启后，能在模版中显示该板块内容">
                        <div @click.stop="chagestop">
                          <t-switch v-model="item.config" @change="change(item)" />
                        </div>
                      </t-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </t-loading>
          </div>
        </div>
      </div>
      <div class="ages-right-child" :class="{ 'ages-right-child_unit': cruuent < 3 }">
        <t-card class="dashboard-detail-card" :title="title" :bordered="false" v-if="cruuent !== 0">
          <component
            @openAIshow="drawervisible = true"
            :is="componetsItem"
            @setGroup="setGroup"
            :id="infoId"
            :infoId="infoId"
            :parentId="parentId"
          />
        </t-card>
        <div class="ages-right-child-null" v-else>
          <span class="ages-right-child-null-title1">新建单元，策展更高效</span>
          <div class="ages-right-child-null-title2">
            <span>新建单元</span>
            <i class="doorIcon">&#xe639;</i>
            <span>添加展品</span>
            <i class="doorIcon">&#xe639;</i>
            <span>即可预览展览效果</span>
          </div>
          <div class="ages-right-child-null-button" @click="addModel()">
            <i class="doorIcon">&#xe662;</i>
            <span>新建单元</span>
          </div>
        </div>
      </div>
    </div>

    <t-dialog
      v-model:visible="visible"
      :header="dialogType ? '单元设置' : '分组设置'"
      :on-close="close"
      @confirm="onConfirmAnother"
    >
      <template #body>
        <t-form>
          <t-form-item :label="dialogType ? '单元名' : '分组名'" name="name" initial-data="TDesign">
            <t-input v-model="gorupInfo.name" :placeholder="dialogType ? '请输入单元名' : '请输入分组名'" />
          </t-form-item>
        </t-form>
      </template>
    </t-dialog>
    <messageModel
      submitText="删除"
      title="提示"
      :visible="visibleMessage"
      problem="确定删除此单元？"
      message="删除后无法找回"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
    <messageModel
      submitText="前往"
      title="提示"
      :visible="visibleMessage1"
      problem="您暂未选择模板"
      message="是否前往模板广场选择？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
    <!-- <auxiliaryModel
      v-if="store.auxiliaryvisible"
      :visible="store.auxiliaryvisible"
      :parentId="infoId"
      @close="auxilaryclose"
      @submit="auxilarysubmit"
      :id="store.auxiliaryId"
    /> -->
    <div class="addAuxiliary" :class="{ 'addAuxiliary-move': store.auxiliaryTitleType === 4 }">
      <t-drawer
        :closeOnOverlayClick="store.auxiliaryTitleType === 3 ? true : false"
        v-model:visible="store.auxiliaryvisible"
        :footer="false"
      >
        <template #header>
          <div class="header-text">
            {{
              store.auxiliaryTitleType === 1
                ? '添加辅助信息'
                : store.auxiliaryTitleType === 2
                ? '编辑辅助信息'
                : store.auxiliaryTitleType === 3
                ? '查看辅助信息'
                : '移动至'
            }}
          </div></template
        >
        <auxiliaryModel
          v-if="(store.auxiliaryvisible && store.auxiliaryTitleType === 1) || store.auxiliaryTitleType === 2"
          :visible="store.auxiliaryvisible"
          :parentId="infoId"
          @close="auxilaryclose"
          @submit="auxilarysubmit"
          :id="store.auxiliaryId"
        />
        <lookAuxiliaryModel
          v-if="store.auxiliaryvisible && store.auxiliaryTitleType === 3"
          :visible="store.auxiliaryvisible"
          :parentId="infoId"
          @close="auxilaryclose"
          @submit="auxilarysubmit"
          :id="store.auxiliaryId"
        />
        <moveAuxiliaryModel
          v-if="store.auxiliaryvisible && store.auxiliaryTitleType === 4"
          :visible="store.auxiliaryvisible"
          :parentId="infoId"
          @close="auxilaryclose"
          @submit="moveAuxilary"
          :id="store.auxiliaryId"
        />
      </t-drawer>
    </div>
    <div class="ai-drawer">
      <t-drawer v-model:visible="drawervisible">
        <AIcomponent />
      </t-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import AIcomponent from '@/components/AI/AIcomponent.vue';
import { publicUrls } from '@/utils/minxin';
import { getPDFexportList, getWordexport } from '@/api/exhibit/exhibit';
// import { exportPdfContext } from '@/utils/getPdfExport';
import { doorUrl } from '@/utils/minxin';
import auxiliaryModel from './components/plan/auxiliaryModel.vue';
import lookAuxiliaryModel from './components/plan/lookAuxiliaryModel.vue';
import moveAuxiliaryModel from './components/plan/moveAuxiliaryModel.vue';
import threeList from './components/plan/three.vue';
import { useRouter, useRoute } from 'vue-router';
import { pathSquare } from '@/utils/minxin';
import { configData } from '@/api/templates/templates';
import messageModel from '@/components/messageModel/index.vue';
import item1 from './components/plan/unit.vue';
import item2 from './components/plan/research.vue';
import item3 from './components/plan/commodity.vue';
import item4 from './components/plan/copyright.vue';
import item5 from './components/plan/CuratorialTeam.vue';
import planTab from './components/plan/leftTab.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { urls } from '@/utils/request/upload';
import { settings, addsettings } from '@/api/project/project';
import { reactive, ref, computed, nextTick, onUnmounted, watch } from 'vue';
import { number } from 'echarts/core';
import { useProjectStore } from '@/store';
import { disableSort, moduleDelete, moduleSave, moduleList } from '@/api/desgin/desgin';
import { storeToRefs } from 'pinia';

const urlConcat = ref('');

const store = useProjectStore();
const { AddUnitstatus } = storeToRefs(store);
// store.$patch((state) => {
//   state.id = 0;
//   state.parentId = 0;
//   state.delId = 0;
// });
const AIvalue = ref('');
const drawervisible = ref(false);
const switchShow = ref(true);
const moduleLists = ref([]);
const plateTab = ref([]);
const cruuent = ref(0);
const delId = ref(0);
const name = ref('');
const id = ref(0);
const parentId = ref(0);
const visible = ref(false);
const visibleMessage = ref(false);
const visibleMessage1 = ref(false);
const leftClose = ref(true);
const dialogType = ref(true);
const noCsroll = ref(false);
const route = useRoute();
const threeRef = ref(null);
const wordLoading = ref(false);
const gorupInfo = reactive({
  name: '',
  id: 0,
  sort: null,
});
if (import.meta.env.MODE === 'development') {
  //开发环境下的执行操作
  //生产环境下的执行操作

  urlConcat.value = `//t-api.jiyi.show/api/exhibition/export/${route.query.projectId}?isShow=true`;
} else {
  //生产环境下的执行操作
  urlConcat.value = `//api.jiyi.show/api/exhibition/export/${route.query.projectId}?isShow=true`;
}
if (route.meta.templateId === 1997) {
  noCsroll.value = true;
}
const chagestop = () => {};
const props = defineProps({
  authenticationId: {
    type: Number,
  },
  inviteIds: {
    type: Number,
  },
  level: {
    type: Number,
  },
});
const tabListref = ref(null);
const visible1 = ref(false);
const loading = ref(false);
const plantabLoading = ref(false);
const title = ref('');
const listMembers = ref([]);
const infoId = ref(0); //当前选中单元id

const exportPdf = async () => {
  getPDFexportList(localStorage.getItem('projectId'), true).then((res) => {
    // exportPdfContext(res.data);
  });
};
const getWord = async () => {
  if (wordLoading.value) {
    return;
  }
  wordLoading.value = true;
  try {
    getWordexport(localStorage.getItem('projectId'), false).then((res) => {
      console.log(res, '11111111111111111');

      // if (res.statusCode === 500) {
      //   MessagePlugin.error(`导出失败`);
      //   return;
      // }
      if (res) {
        downloadFile(res, '展览大纲.docx');
        wordLoading.value = false;
      } else {
        wordLoading.value = false;
        MessagePlugin.error(`导出失败`);
      }

      wordLoading.value = false;
    });
  } catch {
    wordLoading.value = false;
  }

  // let res = await getWordexport(route.query.projectId, true);
  // console.log(res);
};
const downloadFile = (Buffer, filename) => {
  // const blob =fileStream new Blob([fileStream], {
  //   type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  // });
  const arrayBuffer = Buffer; /* 获取或创建你的ArrayBuffer */

  const blob = new Blob([arrayBuffer], {
    // type: 'application/octet-stream;charset=utf-8',
  }); //'application/octet-stream;charset=utf-8'
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = filename;
  downloadLink.click();
  URL.revokeObjectURL(downloadLink.href);
  console.log(blob);
  // .then((blob) => {
  //   // 创建下载链接
  //   const downloadLink = document.createElement('a');
  //   downloadLink.href = URL.createObjectURL(blob);
  //   downloadLink.download = filename;

  //   // 触发点击事件进行下载
  //   downloadLink.click();

  //   // 清理下载链接
  //   URL.revokeObjectURL(downloadLink.href);
  // })
  // .catch((error) => {
  //   console.error('文件下载失败:', error);
  // });
  // fetch(url)
  //   .then(response => response.blob())
  //   .then(blob => {
  //     // 创建下载链接
  //     const downloadLink = document.createElement('a');
  //     downloadLink.href = URL.createObjectURL(blob);
  //     downloadLink.download = filename;

  //     // 触发点击事件进行下载
  //     downloadLink.click();

  //     // 清理下载链接
  //     URL.revokeObjectURL(downloadLink.href);
  //   })
  //   .catch(error => {
  //     console.error('文件下载失败:', error);
  //   });
};
const clickGroup = (e: number, str: string) => {
  // title.value = str;
  cruuent.value = e;
  switch (cruuent.value) {
    case 3:
      title.value = '学术研究';

      break;
    case 4:
      title.value = '文创商品';

      break;
    case 5:
      title.value = '版权声明编辑';

      break;
    case 6:
      title.value = '策展团队';

      break;
    default:
      title.value = '';
      break;
  }
  // if(e)

  nextTick(() => {
    cruuent.value = e;
    switch (cruuent.value) {
      case 3:
        title.value = '学术研究';

        break;
      case 4:
        title.value = '文创商品';

        break;
      case 5:
        title.value = '版权声明编辑';

        break;
      case 6:
        title.value = '策展团队';

        break;
      default:
        title.value = '';
        break;
    }
  });
  // if (cruuent.value == 3 || cruuent.value == 4) {
  //   title.value = null;
  // }
};
const editItem = (e: string | number, parent?: any) => {
  infoId.value = e;
  parentId.value = parent ? parent : 0;
  title.value = '';
  cruuent.value = 1;
  // console.log(infoId.value, parentId.value);
};
const updataSort = async (e) => {
  try {
    let res = await disableSort(e.projectId, e.parentId, e.sort);
    if (res.statusCode == 200) {
      MessagePlugin.success(`排序成功`);
      tabListref.value.drops();
      initList();
    }
  } catch {}
};
// watch(
//   () => store.delId,
//   (value) => {
//     if (store.delId !== 0) {
//       delModule();
//     }
//     // console.log(value, "sNum即刻监听");
//   },
//   { immediate: true },
// );

// watch(
//   () => store.moduleList,
//   (value) => {
//     console.log(store.moduleList, '监听');
//     updataSort(store.moduleList);

//     // console.log(value, "sNum即刻监听");
//   },
//   { deep: true },
// );

const componetsItem = computed(() => {
  let item;
  switch (cruuent.value) {
    case 3:
      return item2;
      break;
    case 4:
      return item3;
      break;
    case 5:
      return item4;
      break;
    case 6:
      return item5;
      break;
    default:
      return item1;
      break;
  }
});
const navModel = (e: { id: number; parentId: numner }) => {
  id.value = e.id;
  parentId.value = e.parentId;
};
const delModule = async (e: number) => {
  delId.value = e;
  visibleMessage.value = true;
};
const addModel = async (dis?: number | string) => {
  if (!dis) {
    // store.$patch((state) => {
    //   state.parentId = 0;
    // });
  }
  let arr = {
    id: 0,
    name: '示例单元',
    description: '',
    coverUrl: '',
    parentId: 0,
    data: [],
  };
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await moduleSave(localStorage.getItem('projectId'), arr);
    if (res.statusCode == 200 && res.data) {
      // store.$patch((state) => {
      //   state.id = res.data;
      //   // state.parentId = 0;
      // });
      MessagePlugin.success('保存成功');
      initList(res.data);
      // nextTick(() => {
      //   threeRef.value.setActive(res.data);
      // });
      loading.value = false;
      return;
    }
    loading.value = false;
    console.log(store.parentId);
  } catch {
    loading.value = false;
  }
  // nextTick(() => {
  //   store.$patch((state) => {
  //     state.id = 0;
  //     state.parentId = 0;
  //   });
  // });
  // title.value = '';
  // cruuent.value = 0;
};
const drops = () => {
  // tabListref.value.drops();
};
const change = (e: { config: Boolean; type: number }) => {
  // console.log(e);
  addsettings(localStorage.getItem('projectId'), [e]);
};
const setGroup = async () => {
  let res = await moduleList(localStorage.getItem('projectId'));
  moduleLists.value = res.data;
};
const updateList = (e?: any) => {
  if (e) {
    initList('init');
  } else {
    init();
  }
  //更新右侧数据列表
};
const init = async (e?: number) => {
  try {
    plantabLoading.value = true;
    let res = await moduleList(localStorage.getItem('projectId'));
    nextTick(() => {
      moduleLists.value = res.data;
      plantabLoading.value = false;
      // console.log(moduleLists.value, 'moduleLists.value-------');
    });
  } catch {}
};
const emitDel = () => {
  init();
};
const initList = async (e?: number) => {
  try {
    plantabLoading.value = true;
    let res = await moduleList(localStorage.getItem('projectId'));
    moduleLists.value = res.data;
    if (e && e !== 'init') {
      nextTick(() => {
        threeRef.value.setActive(e);
        infoId.value = e;
        cruuent.value = 1;
      });
      // nextTick(() => {

      //   // infoId.value = e;
      // });
    } else if (e == 'init') {
      if (moduleLists.value.length > 0) {
        cruuent.value = 1;
        infoId.value = moduleLists.value[0].id;
        parentId.value = 0;
        title.value = '';
      } else {
        cruuent.value = 0;
      }
    } else {
    }
    nextTick(() => {
      plantabLoading.value = false;
    });
  } catch {
    plantabLoading.value = false;
  }
};
const initSetting = async () => {
  try {
    let res = await settings(localStorage.getItem('projectId'), 2);
    plateTab.value = res.data;
  } catch {}
};
const closeClick = () => {
  //取消删除
  visibleMessage1.value = false;
  visibleMessage.value = false;
  store.$patch((state) => {
    state.delId = 0;
  });
};
const submitClick = () => {
  //删除单元
  moduleDelete(localStorage.getItem('projectId'), store.delId).then((res: any) => {
    if (res.statusCode == 200 && res.succeeded) {
      MessagePlugin.success(`删除成功`);
      if (store.delId == store.id) {
        store.$patch((state) => {
          state.id = res.data[0] ? res.data[0].id : 0;
        });
      }
      store.$patch((state) => {
        state.delId = 0;
      });
      initList();
    }
    visibleMessage.value = false;
  });
};
initSetting();
initList('init');
const onConfirmAnother = async (context) => {
  //添加修改分组
  try {
    if (loading.value) {
      return;
    }
    if (!gorupInfo.name) {
      MessagePlugin.error('请填写分组名');
      return;
    } else {
      loading.value = true;

      let res: any = await saveGroup(gorupInfo.id !== 0 ? gorupInfo : { name: gorupInfo.name });
      if (res.statusCode == 200) {
        MessagePlugin.success('添加成功');

        // init();
      }
      loading.value = false;
      visible.value = false;
    }
  } catch {
    visible.value = false;
    loading.value = false;
  }
};
const close = (context) => {};
const preview = () => {
  configData(localStorage.getItem('projectId')).then((res) => {
    if (res.statusCode == 200) {
      store.setstyleInfo(res.data);
      store.setTeplateType(0);
      if (res.data.id === 0 || !res.data.id) {
        visibleMessage1.value = true;
        return;
      }
      pathSquare(res.data.id);
    }
  });
};
const pathSubmitClick = () => {
  let projectId = localStorage.getItem('projectId');
  let url = doorUrl + 'squares?projectId=' + projectId;
  window.open(url, '_blank');
  visibleMessage1.value = false;
};
const addunit = () => {
  //添加单元
};
store.setAuxiliaryvisible(false);
store.setModelIndex(false);
const auxilaryclose = () => {
  store.setAuxiliaryvisible(false);
  // auxiliaryvisible.value = false;
};
const auxilarysubmit = (parmas: any) => {
  store.setAuxiliaryvisible(false);
  store.setAuxiliaryType();
};
const moveAuxilary = (parmas: any) => {
  store.setAuxiliaryvisible(false);
  store.setAuxiliaryType();
};
watch(
  () => store.tabvalue,
  () => {
    if (store.tabvalue === 2) {
      init();
    }
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import '../../company/index.less';
.dashboard-panel-detail {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  // overflow: scroll;
  :deep(.t-card__body) {
    padding-top: 0 !important;
    padding: 0;
    overflow: auto;
  }
}
.page-heard {
  cursor: pointer;
  padding: 0px 24px;
  height: 60px;
  box-shadow: none;
  .title-heard-text {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
  }
}
.outline {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
  // box-shadow: inset -1px 0px 0px 0px #f0f0f0;
  z-index: 2;
}

.three-boxs-outline {
  z-index: 999;
}
.page-heards {
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.pages-box {
  // z-index: 40;
  position: relative;
  // min-height: 100%;
}
.dashboard-panel-detail-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.pages-box-pop {
  display: flex;
  width: 100%;
  height: 100%;
  .pages-left-child {
    position: relative;
    // z-index: 130;
  }
  // height: 100%;
}
.dashboard-panel-detail-child::-webkit-scrollbar {
  display: none;
}
.heard-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  border-radius: 4px;
  background: #f5f5f5;
  border: none;
  .doorIcon {
    font-size: 20px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.38);
  }
}

.page-heard-sloid {
  position: relative;
  z-index: 3;
}
.page-heard-dr {
  width: 252px;
  height: 16px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  margin: 0 auto;
}
.three-boxs-active-move {
  position: relative;

  animation-name: coverMove;
  animation-duration: 1s;
  animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
}
@keyframes coverMove {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 1;
  }
  90% {
    z-index: 1;
  }
  100% {
    z-index: 666;
  }
}
.pages-left-child {
  position: relative;
  min-height: calc(100% - 2px);
  // margin-top: 2px;
  padding: 0;
  padding-bottom: 16px;
  width: 284px;

  border: none;
  // border-right: 1px solid #f0f0f0;
}
.pages-left-child-item::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.pages-left-child-level {
  padding-bottom: 20px !important;
  height: calc(100vh - 64px);
}
.pages-left-child-item {
  height: 100%;
  // overflow-y: scroll;
}
.pages-left-child-item-child {
  position: relative;
  // z-index: 100;
  width: calc(100% - 1px);
  height: 100%;
}
.card-item-parent {
  display: flex;
  align-items: center;
  justify-content: center;

  // height: 44px;
}
.card-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 24px;
}
.card-item:hover {
  background: #f0f0f0;
}
.chang-item-active {
  background: #ffece6;
  color: #e62b17 !important;
  .card-item-left {
    margin-left: 16px;
    color: #e62b17 !important;
  }
}
.card-item-left {
  margin-left: 16px;
}
.look-btn {
  position: absolute;
  z-index: 6;
  bottom: 0px;
  left: 0;
  padding: 24px 24px;
  width: 100%;
  background: #fff;
}
.ages-right-child {
  // position: fixed;
  // top: 64px;
  // right: 0;
  width: calc(100vw - 364px);
  height: calc(100vh - 64px);
  // border: none !important;
  // background: none !important;
  overflow: hidden;
  border: none;
  margin: 0;
  padding: 16px 0px;
  padding-bottom: 0px;
  padding-top: 0;
  :deep(.t-card) {
    height: 100%;
  }
  :deep(.t-card__header) {
    height: 56px;
    min-height: 56px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
    // padding: 0 24px;
    box-shadow: none;
    padding: 0 24px;
  }
  :deep(.t-card__body) {
    height: calc(100% - 64px);
  }
}
.ages-right-child_unit {
  :deep(.t-card__body) {
    height: calc(100%);
  }
}
.dashboard-detail-card {
  width: 100%;
}
.pages-box-noscroll {
  width: 100%;
  height: 100vh;
  // padding-top: 72px;
}
.flot-btn {
  z-index: 100;
}
.switch-box {
  cursor: pointer;
  .doorIcon {
    font-size: 16px;
    color: RGBA(0, 0, 0, 0.38);
    transition: all 0.3s;
  }
}
.switch-box-lock {
  transform: rotate(-90deg);
}
.pages-left-contents {
  // position: relative;
  // z-index: 3;
  width: 100%;
  height: auto;
  transition: all 0.3s;
}
.pages-left-contents-reative {
  position: relative;
  z-index: 3;
}
.pages-left-contents-lock {
  height: 0px;
  overflow: hidden;
}
.ages-right-child-null {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ages-right-child-null-title1 {
  display: flex;
  justify-content: center;
  margin-top: 281px;
  width: 100%;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 30px;
}
.ages-right-child-null-title2 {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
  }
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.59);
    margin: 0 8px;
  }
}
.ages-right-child-null-button {
  position: relative;
  z-index: 33;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 36px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
  margin-top: 24px;
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
  }
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.59);
    margin-right: 6px;
  }
}
.ages-right-child-null-button:hover {
  background: #fafafa;
}
.contents-null-button {
  width: 236px;
  height: 36px;
  margin: 0 auto;
}
.pages-left-close {
  width: 6px;
}
.three-boxs-active {
  position: relative;
  z-index: 666;
}

#plan-child-id-2 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
}
.icon-boxs {
  display: flex;
  align-items: center;
}
.heard-icon-down {
  border: none;
  .doorIcon {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.38);
  }
}
:deep(.t-card) {
  border-radius: 0px !important;
  background: #fff;
}
.ages-right-child {
  border-radius: 0px !important;
}
.ai-drawer {
  :deep(.t-drawer__header) {
    display: none;
  }
  :deep(.t-drawer__footer) {
    display: none;
  }
  :deep(.t-drawer__content-wrapper) {
    width: 480px !important;
    background: linear-gradient(315deg, #f5edff 0%, #f0f5ff 100%);
  }
  :deep(.t-drawer__body) {
    padding: 16px 20px;
  }
}
.content-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ai-heard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #ff0000;
  line-height: 28px;
  background: linear-gradient(119deg, #12aad0 0%, #8445e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  text-align: center;
}
.ai-center {
  flex: 1;
  width: 100%;
}
.ai-bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 84px;
  margin-top: 16px;
}
.ai-bottom-top {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 64px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid transparent;
  border-image: linear-gradient(132deg, rgba(185, 225, 243, 1), rgba(199, 183, 234, 1)) 1 1;
  padding: 12px;
}
.ai-bottom-top-left {
  flex: 1;
  min-height: 100%;
  margin-right: 12px;
  :deep(.t-textarea) {
    border: none;
  }
  :deep(.t-textarea__inner) {
    padding: 0px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    border: none;
  }
}
.ai-bottom-top-right {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(314deg, #f5effd 0%, #dae5f9 100%);
  border: none;
  img {
    width: 20px;
    height: 20px;
  }
}
.ai-bottom-top-right:hover {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.ai-bottom-top-right:active {
  background: #dcdff5;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.ai-bottom-tip {
  height: 20px;
  font-size: 13px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 20px;
}
:deep(.t-pagination__number:active) {
  background-color: #f2573f !important;
}
.addAuxiliary {
  :deep(.t-drawer__content-wrapper) {
    // width: 720px !important;
    width: calc(100vw) !important;
    padding-left: calc(100vw - 720px);
    background: transparent;
  }
  :deep(.t-drawer__header) {
    padding: 20px 30px !important;
    background: #fff;
  }
  :deep(.t-drawer__body) {
    padding: 0 !important;
    background: #fff;
  }
  :deep(.narrow-scrollbar) {
    scrollbar-width: none !important;
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}
.addAuxiliary-move {
  :deep(.t-drawer__content-wrapper) {
    width: 100vw !important;
  }
}
:deep(.addAuxiIcon) {
  max-width: 328px !important;
}
:deep(.addAuxiIcon .t-popup__arrow::before) {
  background: #333 !important;
  box-shadow: none;
}
.pages-left-child-item-child-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .tree-content {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: auto;
  }
}
:deep(.t-loading__parent) {
  height: 100%;
}
:deep(.t-table__empty-row) {
  td {
    padding: 0px !important;
  }
}
.tree-content {
  position: relative;
}
:deep(.t-dialog__ctx.t-dialog__ctx--fixed) {
  transform: translateZ(1px);
}
:deep(.t-dialog__ctx .t-dialog__position) {
  transform: translateZ(1px);
}
</style>
